package com.example.featuresdk.view

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.*
import com.example.featuresdk.model.Topic
import com.example.featuresdk.viewmodel.NavigationViewModel

@ExperimentalUnitApi
@Composable
fun TopicEntryView(topic: Topic, screenConfiguration: NavigationViewModel, showArrow:Boolean=true) {

    val horizontalPadding = 4
    val spacerWidth = 20
    val arrowWidth = 8
    val iconWidthHeight = 30
    val textWidth = screenConfiguration.screenWithDp - horizontalPadding - horizontalPadding - iconWidthHeight - spacerWidth - arrowWidth

    val tailingContent = if(showArrow) ">" else ""

    Row(horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.Top,
        modifier = Modifier.background(Color.White)){

        Spacer(modifier = Modifier.width(horizontalPadding.dp))

        Image(painter = painterResource(topic.icon),
            contentDescription = topic.summary,
            modifier = Modifier.width(iconWidthHeight.dp).height(iconWidthHeight.dp))

        Spacer(modifier = Modifier.width(spacerWidth.dp))

        Column() {
            Row {
                Text(text = topic.title,
                    modifier = Modifier
                        .width(textWidth.dp).height(40.dp)
                        .background(Color.Transparent),
                    textAlign = TextAlign.Start,
                    fontSize = TextUnit(4f, TextUnitType.Em),
                    fontFamily = FontFamily.SansSerif
                )
                Text(text = "$tailingContent",
                    modifier = Modifier.width(arrowWidth.dp),
                    color = Color.Gray,
                    fontSize = TextUnit(5f, TextUnitType.Em))
            }

            Text(text="", modifier = Modifier.height(1.dp).width((textWidth + arrowWidth).dp).border(
                Dp.Hairline,Color.LightGray))
        }
        Spacer(modifier = Modifier.width(horizontalPadding.dp))
    }
}